<template>
  <el-container>
    <el-main>
      <el-card class="login-card">
        <h2>管理后台登录</h2>
        <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'

const form = ref({
  username: '',
  password: ''
})

const rules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
})

const handleLogin = () => {
  // 后续可添加登录接口调用逻辑
  console.log('登录信息:', form.value)
}
</script>

<style scoped>
.login-card {
  max-width: 400px;
  margin: 0 auto;
  padding: 40px;
}
</style>